<template>
	<view class="content-box">
		<view class="main">
			<view class="picture">
				<span class="picture-left">头像</span>
			</view>

			<view class="photo upAvatar">
				<view class="upAvatar_img" @click="upAvatar">
					<image mode="aspectFit" style="width:200rpx;height:200rpx" src="../../static/pages/upload.png"></image>
				</view>
				<image class="upAvatar_avatar" :src="avatar"></image>
			</view>

			<view class="picture">
				<span class="picture-left">照片墙</span>
				<span class="picture-right">(至少上传1张,最多上传6张)</span>
			</view>

			<view class="photo">
				<imgUpload :count="count" :img_list="img_list" @obtain_img="obtain_img" :name="name" :header="header" :url="url"></imgUpload>
				<!-- <image v-for="(item,index) in info.avatar" :key="index" class="img" :src="item"></image> -->
				<!-- <image class="img" src="../../static/pages/upload.png"></image> -->
			</view>

			<view class="picture">
				<span class="picture-left">视频简介</span>
			</view>
			<view class="photo" style="padding-left: 30rpx;display: flex;padding-top: 40rpx;">
				<video :src="info.short_video" :controls="false" v-if="info.short_video" style="width: 200rpx;height: 200rpx;margin-right: 30rpx;"></video>
				<image mode="aspectFit" style="width:200rpx;height:200rpx;margin-bottom: 15rpx;" src="../../static/pages/upload.png"
				 @click="chooseVideo"></image>
			</view>

			<view class="warn">* 尊敬的用户,您上传的头像和照片须遵循相关法律法规和社区规则,请严格遵守相关规定,以免违规</view>
			<view class="message">基本信息</view>
			<view class="message-list">
				<view class="flexItemMain ">
					<view class="flexItemCenter">
						昵称
					</view>
					<input class="flexItemRightImg2" v-model="info.nickname" maxlength="10" placeholder="请输入昵称" />
				</view>
				<view class="blank"></view>
				<view class="flexItemMain ">
					<view class="flexItemCenter">
						性别（不可更改）
					</view>
					<view class="flexItemRightImg" style="color: #A9A7B2;" v-if="info.sex==2">女</view>
					<view class="flexItemRightImg" style="color: #A9A7B2;" v-if="info.sex==1">男</view>
				</view>
				<view class="blank"></view>
				<view class="flexItemMain ">
					<view class="flexItemCenter">
						生日
					</view>
					<view class="flexItemRightImg" style="color: #A9A7B2;margin-right: 10rpx;">
						<picker mode="date" :value="info.birthday" :end="endDate" @change="bindDateChange">
							<view class="uni-input" v-if="info.birthday">{{info.birthday}}</view>
							<view class="uni-input" v-else>请选择</view>
						</picker>
					</view>
					<image class="int" src="../../static/pages/int.png"></image>
				</view>
			</view>
			<view class="message">个性签名</view>
			<view class="content">
				<textarea name="bindTextAreaBlur" placeholder="说点什么，让大家看到不一样的你~" bindinput="getValueLength" show-confirm-bar='true'
				 v-model="info.personal_signature" maxlength="500" minlength="2">
				</textarea>
			</view>
			<view class="save" @click="submit"><span class="save-text">保存</span></view>
		</view>

		<image-cropper :crop-fixed="true" :src="avatar_url" @confirm="confirm" @cancel="cancel"></image-cropper>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import imgUpload from '../../components/linzq-imgUpload/linzq-imgUpload.vue'
	export default {
		components: {
			imgUpload,
			ImageCropper
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				info: {},
				date: currentDate,
				avatar: '',
				avatar_url: '',
				img_list: [],
				count: 6,
				name: '', //必填
				url: 'https://sx.hualin688.com', //必填
				// url: '/api/api/upload', //必填
				header: {},
				videoUrl: ''
			}
		},
		onLoad() {
			this.getData()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			upAvatar() {
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.avatar_url = tempFilePaths[0]
					}
				});
			},
			confirm(e) {
				this.avatar_url = ''
				this.avatar = e.detail.tempFilePath
				uni.uploadFile({
					url: this.$utils.domain + '/api/upload', //仅为示例，非真实的接口地址
					filePath: this.avatar,
					name: 'file',
					success: res => {
						if (res.statusCode == 200) {
							let ress = JSON.parse(res.data);
							if (ress.code == 200) {
								this.avatar = ress.data;
							}
						}
					}
				});
			},
			cancel() {
				this.avatar_url = ''
			},
			chooseVideo() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						// console.log(res.tempFilePath)
						uni.showLoading({ //加载框
							title: '加载中...'
						})
						const tempFilePaths = res.tempFilePath;
						uni.uploadFile({ //上传图片
							url: self.url, //上传接口地址
							filePath: tempFilePaths, //一张图
							name: 'file',
							success: res => {
								// console.log(res);
								let obj = JSON.parse(res.data)
								self.info.short_video = obj.data;
							}
						});
						uni.hideLoading() //关闭加载框
					}
				});
			},
			obtain_img(data) {
				// console.log(data, "获取到的图片组" + data.length + "张")
				this.info.avatar = data
			},
			bindDateChange(e) {
				this.info.birthday = e.target.value
			},
			getData(params) {
				let that = this
				this.$utils.request("/api/user/index", {}, function(res) {
					if (res.code == 200) {
						// console.log('res', res)
						// that.list = res.data
						res.data.avatar = JSON.parse(res.data.avatar)
						that.info = res.data
						that.img_list = res.data.avatar
						if (!that.avatar) {
							that.avatar = that.img_list.shift()
						} else {
							that.img_list.shift()
						}
						if (params === 1) that.getUserInfo()
					}
				})
			},
			getUserInfo() {
				let that = this
				this.$utils.request("/api/user_center/index", {}, function(res) {
					if (res.code == 200) {
						uni.setStorageSync('userInfo', JSON.stringify(res.data.user));
					}
				})
			},
			submit() {
				let that = this
				that.info.avatar.unshift(this.avatar)
				that.info.avatar = JSON.stringify(that.info.avatar)
				this.$utils.postrequest("/api/user/edit", that.info, function(res) {
					if (res.code == 200) {
						that.$utils.showLayer('保存成功')
						that.getData(1)

						let promise = that.tim.updateMyProfile({
							nick: that.info.nickname,
							avatar: that.avatar,
						});
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				} else {
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F7;
		height: 1900rpx;
	}

	.main {
		margin: 55rpx 0rpx 0rpx 24rpx;
	}

	.picture-left {

		font-size: 33rpx;
		font-family: PingFang SC;

		color: #1A1A1A;
		line-height: 19rpx;
	}

	.picture-right {
		margin-top: 15rpx;
		font-size: 25rpx;
		font-family: PingFang SC;

		color: #A9A7B2;
		line-height: 19rpx;
		position: absolute;
	}

	.photo {
		background: #FFFFFF;
		border-radius: 6rpx 6rpx 6rpx 13rpx;
		margin-top: 36rpx;
		margin-right: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.save {
		background: #6ac7fc;
		width: 650rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin: 80rpx 0rpx 0rpx 30rpx;
		/* padding-bottom: 100rpx; */
	}

	.save-text {
		color: #fff;
		font-size: 32rpx;
		font-family: PingFang SC;

		line-height: 19rpx;
		margin: 50rpx 0rpx 0rpx 300rpx;
		display: inline-block;
	}

	.img {
		margin: 20rpx 0rpx 0rpx 22rpx;
		width: 207rpx;
		height: 206rpx;
		border-radius: 6rpx 6rpx 0rpx 0rpx;
	}

	.warn {
		margin: 30rpx 0rpx 0rpx 16rpx;
		font-size: 22rpx;
		font-family: PingFang SC;

		color: #B0AEBB;
		line-height: 35rpx;
	}

	.message {
		margin: 65rpx 0rpx 0rpx 20rpx;
		font-size: 33rpx;
		font-family: PingFang SC;

		color: #1A1A1A;
		line-height: 19rpx;
	}

	.message-list {
		margin-top: 42rpx;
		width: 702rpx;
		height: 324rpx;
		background: #FFFFFF;
		border-radius: 6rpx 6rpx 6rpx 13rpx;
	}

	.blank {
		width: 700rpx;
		height: 1rpx;
		background: #DDDDDD;
	}

	.int {
		flex: none;
		width: 25rpx;
		height: 25rpx;
		margin-right: 30rpx;
	}

	.content {
		position: relative;
		border: 1px solid #deeff6;
		border-radius: 10rpx;
		width: 700rpx;
		background-color: #ffff;
		margin-top: 40rpx;
	}

	textarea {
		min-height: 300rpx;
		max-height: 300rpx;
		padding: 10rpx 10rpx;
		font-size: 26rpx;
		width: 94%;
		margin-left: 3%;
		margin-top: 15rpx;
		line-height: 50rpx;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 45rpx 0;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		width: 48rpx;
		height: 48rpx;
		flex: none;
		margin-right: 12rpx;
		margin-left: 48rpx;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
		margin-left: 42rpx;

		font-size: 28rpx;
		font-family: PingFang SC;

		color: #B0AEBB;
		line-height: 19rpx;
	}

	.flexItemRightImg {

		font-size: 28rpx;
		font-family: PingFang SC;

		color: #2B2937;
		line-height: 19rpx;
		flex: none;
		margin-right: 48rpx;
		/* margin-left: 10rpx; */
	}

	.flexItemRightImg2 {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #2B2937;
		flex: none;
		margin-right: 48rpx;
		/* margin-left: 10rpx; */
	}

	.flexItemXian {
		margin-right: 48rpx;
		margin-left: 48rpx;
		height: 1rpx;
		background: #F6F8F7;
	}

	.signature {
		width: 702rpx;
		height: 324rpx;
		background: #FFFFFF;
		border-radius: 6rpx 6rpx 6rpx 13rpx;
		margin-top: 50rpx;
	}

	.upAvatar {
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.upAvatar_avatar {
		width: 204rpx;
		height: 205rpx;
		border-radius: 15rpx;
		margin-left: 20upx;
	}
	.content-box{
		background-color: white;
		margin-top:-70rpx;
		padding-top:70rpx;
	}
</style>
